import React from 'react';
import {inject, observer} from 'mobx-react';

@inject('portalLoginStore')
@observer
class E9CustomElement extends React.Component {
    render() {
        const {portalLoginStore, item} = this.props;
        const {state, getElementStyle} = portalLoginStore;

        if (item.type == 'image') {
            const {content, rotate} = item;
            const style = {
                transform: `rotate(${rotate}deg)`,
                MsTransform: `rotate(${rotate}deg)`,
                MozTransform: `rotate(${rotate}deg)`,
                WebkitTransform: `rotate(${rotate}deg)`,
                OTransform: `rotate(${rotate}deg)`,
                opacity: item.opacity / 100,
            };

            return <img src={content} alt="" className="e9login-element" style={{...style, ...getElementStyle(item)}}/>;

        } else if (item.type == 'text') {
            const {content, color, fontSize, fontFamily, fontStyle, fontWeight, backgroundColor, opacity, textAlign, verticalAlign, textDecoration, rotate} = item;
            const style = {
                transform: `rotate(${rotate}deg)`,
                MsTransform: `rotate(${rotate}deg)`,
                MozTransform: `rotate(${rotate}deg)`,
                WebkitTransform: `rotate(${rotate}deg)`,
                OTransform: `rotate(${rotate}deg)`,
                backgroundColor,
                opacity: opacity / 100,
            };

            return (
                <div className="e9login-custom-text e9login-element" style={{...style, ...getElementStyle(item)}}>
                    <div className="e9login-custom-text-content" style={{color, fontSize: fontSize + 'px', fontFamily, fontStyle, fontWeight, textAlign, verticalAlign, textDecoration}} dangerouslySetInnerHTML={{__html: content}}/>
                </div>
            );

        } else {
            return <div/>;
        }
    }
}

export default E9CustomElement;



